@font-face {
  font-family: "BeVietnamPro-Regular";
  src: url("../fonts/BeVietnamPro-Regular.ttf");
}

@font-face {
  font-family: "BeVietnamPro-SemiBold";
  src: url("../fonts/BeVietnamPro-SemiBold.ttf");
}

@font-face {
  font-family: "BeVietnamPro-Italic";
  src: url("../fonts/BeVietnamPro-Italic.ttf");
}
body {
  font-family: "BeVietnamPro-Regular";
  font-size: 14px;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden !important;
}
label,b{font-family: "BeVietnamPro-SemiBold";}
section{margin-bottom: 0}
p{
    margin-bottom: 0 !important;
}
.color-FFC629{
    color: #FFC629 !important;
}
.height-100{
    height: 100%;
}

.list-breakcum{
    border-top: 1px solid #00000052;
    border-bottom: 1px solid #00000052;
    padding: 12px 0;
    margin-bottom: 130px;
}
.list-breakcum ul{
    margin-bottom: 0;
}
.list-breakcum ul li{
    display: inline-block;
    border-right: 1px solid #636467;
}
.list-breakcum ul li label{
    font-size: 16px;
    padding-right: 22px;
    margin-bottom: 0;
}
.list-breakcum ul li p{
    font-size: 16px;
    padding-left: 22px;
}
.list-breakcum ul li:last-child{
    border-right: 0;
}

.title-page{
  max-width: 750px;
    margin: 0 auto 60px;
  position: relative;
  z-index: 9;
}

.text-white{
    color: #fff !important;
}
.title-page h2{
  font-size: 40px;
  font-family: "BeVietnamPro-SemiBold";
  color: #404040;
  margin-bottom: 24px;
}
.title-page h2 span{
  color: #294AAA;
}
.title-page p{
  color: #363739;
  font-size: 20px;
}
.title-page span.tp-hotline{
    color: #E99323;
    font-family: "BeVietnamPro-SemiBold";
    font-size: 28px;
    margin-top: 40px;
    display: flex;
}
.title-page span.tp-hotline img{
    margin-right: 12px;
}
.bg-title{
    background-image: linear-gradient(to right, #F5EDE3 , #FBEBD7);
}
@media (max-width: 821px){
    .title-page h2{
        font-size: 32px;
    }
    .title-page p{
        font-size: 14px;
    }
    .title-page span.tp-hotline{
        font-size: 20px;
    }
}
@media (max-width: 541px){
    .list-breakcum{
        margin-bottom: 40px;
    }
}
/****** Section Banner ******/
    .GP-banner{
        padding: 0px 0 100px;
        position: relative;
        
        background: url(../img/GP-img/gpi-qr/bg-bannerrq.png) no-repeat;
        background-size: contain;
        background-position: center;
        /*background-image: linear-gradient(to right, #F5EDE3 , #FBEBD7);*/
    }
    /*.GP-banner:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 900px;
        right: -12%;
        bottom: 4%;
        background: url(../img/GP-img/gpi-qr/bg-bannerrq.png) no-repeat;
        background-size: contain;
    }*/
    .GPb-bg{
        position: absolute;
        z-index: 1;
    }
    .GPb-bg.GPb-bg-1{
        top: -83px;
        z-index: 0;
        right: -42px;
    }
    .GPb-bg.GPb-bg-2{
        right: -26px;
        bottom: -24px;
    }
    .GPb-bg.GPb-bg-3{
        bottom: -115px;
        left: 0;
        z-index: -1;
    }
    .GPb-bg.GPb-bg-4{
        top: -30px;
        left: -69px;
    }
    .GPb-text{
        position: relative;
        z-index: 2;
    }
    .GPb-text h2{
        font-size: 82px;
        font-family: "BeVietnamPro-SemiBold";
        color: #363739;
        margin-bottom: 16px;
        line-height: 86px;
        position: relative;
    }
    .GPb-text h2 > span{
        color: #294AAA;
    }
    .GPb-text p{
        color: #363739;
        font-size: 20px;
        margin-bottom: 32px !important;
    }
    .GPb-text a{
        color: #fff;
        background: #404040;
        font-size: 16px;
        padding: 8px 24px;
        margin-bottom: 32px;
        display: inline-block;
        border-radius: 8px;
        font-family: "BeVietnamPro-SemiBold";
    }
    .GPb-text a.btn-outline{
        color: #294AAA;
        background: transparent;
        border: 1px solid #294AAA;
        font-size: 16px;
        padding: 8px 24px;
        margin-bottom: 32px;
        display: inline-block;
        border-radius: 8px;
        font-family: "BeVietnamPro-SemiBold";
    }
    .GPb-text > span{}
    
    .GPb-img{
        position: relative;
        z-index: 9;
    }
    /*.GPb-img:before{
        position: absolute;
        content: '';
        width: 100%;
        height: 900px;
        right: -12%;
        bottom: 4%;
        background: url(../img/GP-img/gpi-qr/bg-bannerrq.png) no-repeat;
        background-size: contain;
    }*/
    .GPb-img img{}

    @media (max-width: 821px){
        .GPb-text h2{
            font-size: 32px;
            line-height: 38px;
        }
        .GPb-text p{
            font-size: 14px;
        }
    }
    @media (max-width: 541px){
        .GPb-text{
            text-align: center;
            margin-bottom: 20px;
        }
        .GP-banner{
            background-size: cover;
        }
    }
/****** End Section Banner ******/

/******  Section Bank ******/
    .GP-bank{
        padding: 80px 0;
    }
    .GPb-list{
        /*display: flex;*/
        align-items: center;
        justify-content: center;
    }
    .GPbl-detail{
        border: 1px solid #DADADA;
        border-radius: 24px;
        padding: 24px;
        text-align: center;
        min-height: 200px;
        margin-bottom: 20px;
    }
    .GPbl-detail label{
        color: #808890;
        margin-bottom: 24px;
        font-size: 20px;
    }
    .GPbl-detail ul{}
    .GPbl-detail ul li{
        display: inline-block;
    }
    .GPbl-detail ul li span{
        display: inline-block;
        margin: 8px;
    }
    .GPbl-detail ul li span img{}
    @media (max-width: 821px){
        
    }
    @media (max-width: 541px){
        
    }
/****** End Section Bank ******/

/****** Section Trợ lý ******/
    /*.box-section{
        background-image: linear-gradient(to right, #EB972C , #F7B064);
        position: relative;
    }*/
    .box-GP-assistant{
        padding: 0px 0 80px;
    }
    .GP-assistant{
        margin: 0px 0 0px;
        background: #F8F8F8;
        padding: 40px 40px 20px;
        border-radius: 12px;
        position: relative;
        z-index: 10;

        background: rgba(235, 235, 235, 0.25);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .GPa-all .col-sm-4{
        padding-right: 8px;
        padding-left: 8px;
    }
    .GPa-detail{
        background: #EAEDF7;
        border-radius: 12px;
        /*padding: 24px;*/
        text-align: center;
        min-height: 312px;
        margin-bottom: 20px;
    }
    .GPa-detail figure{
        display: block;
        margin-bottom: 24px;
    }
    .GPa-detail figure img{width: 100%}
    .GPa-detail article{
        padding: 0px 20px 24px;
    }
    .GPa-detail article > img{
        display: block;
        margin: 0 auto 10px;
    }
    .GPa-detail article > span{
        display: block;
    }
    .GPa-detail article > span.text-tag{
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 16px;
        font-family: "BeVietnamPro-SemiBold";
        margin-bottom: 24px;
        background: #D8DEF1;
    }
    .GPa-detail article > span.text-tag.text-tag-red {
        color: #ED1B2F;
    }
    .GPa-detail article > span.text-tag.text-tag-ping {
        color: #CF4594;
    }
    .GPa-detail article > span.text-tag.text-tag-purple {
        color: #3E3C83;
    }
    .GPa-detail article label{
        font-size: 20px;
        color: #404040;
        margin-bottom: 12px;
        font-family: "BeVietnamPro-SemiBold";
    }
    .GPa-detail article p{
        font-size: 16px;
        color: #404040;
        margin-bottom: 0;
        text-align: left;
        min-height: 94px;
    }
    @media (max-width: 821px){
        .GPa-detail article label{
            font-size: 16px;
        }
        .GPa-detail article p{
            font-size: 14px;
        }
    }
    @media (max-width: 541px){
        .GPa-detail{
            min-height: auto;
        }
        .box-GP-assistant{
            background-image: linear-gradient(to top, #2F51B0, #fff);
        }
    }
/****** End Section Trợ lý ******/

/****** Section Doanh thu ******/
    .GP-revenue{
        padding: 680px 0 80px;
        background-image: linear-gradient(to right, #2F51B0, #3361E8);
        margin-top: -673px;
        position: relative;
        z-index: 9;
    }
     .GP-revenue .col-sm-6{
        display: flex;
    }
    .bg-revenue{
        position: absolute;
        z-index: 1;
    }
    .bg-revenue.bg-revenue-top-left{
        top: 0;
        left: 0;
    }
    .bg-revenue.bg-revenue-top-right{
        top: 0;
        right: 0;
    }
    .bg-revenue.bg-revenue-bottom-left{
        bottom: -16px;
        left: 0;
    }
    .bg-revenue.bg-revenue-top-center{
        top: 28%;
        left: 6%;
    }
    .bg-revenue.bg-revenue-bottom-center{
        bottom: 20%;
        right: 5%;
    }
    .GPr-detail{
        padding: 0 0 40px 0;
        border-radius: 40px;
        margin-bottom: 20px;
        background: #fff;
        position: relative;
        z-index: 2;
    }
    .GPr-detail.GPr-detail-blue{
        background: #E6F6FF;
        border: 1px solid #00A0FF;
    }
    .GPr-detail.GPr-detail-green{
        background: #E9F8F1;
        border: 1px solid #21B971;
    }
    .GPrd-tag{
        border-radius: 40px 40px 0 0;
    }
    .GPrd-tag.GPrd-tag-orange{
        background: #E99323;
    }
    .GPrd-tag.GPrd-tag-red{
        background: #CF232A;
    }
    .GPrd-tag h3{
        display: block;
        text-transform: uppercase;
        color: #fff;
        font-family: "BeVietnamPro-SemiBold";
        font-size: 20px;
        padding: 16px 0;
        text-align: center;
    }
    .GPr-detail .GPrd-title{
        display: flex;
        margin-bottom: 24px;
        /*padding: 0 40px;*/
        margin-top: 40px;
    }
    .GPr-detail .GPrd-title > span{
        display: block;
        width: 60px;
        height: 60px;
        margin-right: 16px;
        margin-top: 8px;
    }
    .GPr-detail .GPrd-title > span > img{}
    .GPr-detail .GPrd-title h4{
        font-size: 28px;
        font-family: "BeVietnamPro-SemiBold";
    }
    .GPr-box{
        padding: 0 40px;
    }
    .GPrd-bage{
        padding: 16px;
        display: flex;
        align-items: center;
        font-family: "BeVietnamPro-SemiBold";
        border-radius: 12px;
        margin-top: 40px;
        margin-bottom: 24px;
    }
    .GPrd-bage figure{
        margin-right: 12px;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-bottom: 0;
    }
    .GPrd-bage figure img{}
    .GPrd-bage p{
        font-size: 16px;
        width: calc(100% - 28px);
    }
    .GPrd-bage.GPrd-bage-red{
        background: #FBE9EA ;
    }
    .GPrd-bage.GPrd-bage-red p{
        color: #CF232A;
    }
    .GPrd-bage.GPrd-bage-blue{
        background: #E7EFF7 ;
    }
    .GPrd-bage.GPrd-bage-blue p{
        color: #095AA8;
    }
    .GPr-detail ul{
        /*padding: 0 40px;*/
    }
    .GPr-detail ul li{
        display: flex;
        align-items: start;
        margin-bottom: 16px;
    }
    .GPr-detail ul li > span{
        display: block;
        width: 24px;
        height: 24px;
        margin-right: 12px;
        /*margin-top: 6px;*/
    }
    .GPr-detail ul li > span > img{}
    .GPr-detail ul li article{
        width: calc(100% - 36px);
    }
    .GPr-detail ul li article label{
        font-size: 18px;
        font-family: "BeVietnamPro-SemiBold";
        margin-bottom: 8px;
    }
    .GPr-detail ul li article p{
        font-size: 16px;
        margin-bottom: 0;
    }
    
    @media (max-width: 821px){
        .GPr-detail .GPrd-title h4{
            font-size: 20px;
        }
        .GPr-detail ul li article label{
            font-size: 16px;
        }
        .GPr-detail ul li article p{
            font-size: 14px;
        }
        .experience ul{
            display: block !important;
        }

    }
    @media (max-width: 541px){
        .GP-revenue{
            background: #2F51B0;
            padding: 80px 0 80px;
            margin-top: 0;
        }
        .bg-revenue.bg-revenue-top-left,
        .bg-revenue.bg-revenue-top-right{
            display: none;
        }
    }
/****** End Section Doanh thu ******/



/****** Section Contact ******/
    .GP-contact{
        background: #2d4faf1f;
        padding: 80px 0;
        position: relative;
        z-index: 10;
    }
    .bg-contact{
        position: absolute;
        right: 10%;
        bottom: 22%;
        z-index: 1;
    }
    .GPc-box{
        max-width: 920px;
        margin: 0 auto;
        border-radius: 40px;
        background: #2F51B1;
        /*padding: 40px;*/
        position: relative;
        z-index: 2;
    }
    .GPc-box .title-page{
        padding: 40px 0 40px 40px;
    }
    .form-contact{
        background: #fff;
        padding: 40px;
        height: 100%;
        border-radius: 0 39px 39px 0;
        margin-right: -1px;
    }
    .form-contact a{
        color: #fff;
        background: #404040;
        font-size: 16px;
        padding: 12px;
        /*margin-bottom: 32px;*/
        border-radius: 8px;
        display: block;
        text-align: center;
    }
    /* 1. Wrapper: Cần 'position: relative' để định vị cho label */
    .form-contact .form-group {
        position: relative;
        margin-bottom: 30px; /* Thêm khoảng cách giữa các trường */
    }
    .form-contact .form-group figure{
        position: absolute;
        top: 20px;
        right: 15px;
    }
    /* 2. Style chung cho Input, Select, và Textarea */
    .form-contact .form-group input,
    .form-contact .form-group select,
    .form-contact .form-group textarea {
        width: 100%;
        padding: 16px 12px 8px 12px; /* Thêm padding trên/dưới để có không gian */
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: white;
        box-sizing: border-box; /* Đảm bảo padding không làm vỡ layout */
        
        /* Quan trọng: để thẻ label không che mất chữ */
        background-color: transparent; 
        z-index: 1; /* Đặt input/select/textarea lên trên */
        line-height: 1.4; /* Cải thiện khả năng đọc cho textarea */
    }

    /* 3. Style cho Label (Trạng thái ban đầu) */
    .form-contact .form-group label {
        position: absolute;
        top: 13px;  /* Căn giữa với padding của input/select */
        left: 13px; /* Căn lề với padding */
        font-size: 16px;
        color: #888;
        font-family: "BeVietnamPro-Regular";
        /* Quan trọng: Cho phép click "xuyên" qua label */
        pointer-events: none; 
        
        /* Hiệu ứng chuyển động mượt mà */
        transition: all 0.2s ease;
        
        /* Đặt label xuống dưới để input/select đè lên */
        z-index: 0; 
    }

    /* 3.1. Style riêng cho Select */
    .form-contact .form-group select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        
        /* Thêm mũi tên dropdown tùy chỉnh */
        background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%2D%2Dfill%3D%22%23555%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%2011.03a.75.75%200%200%201-.53-.22l-4-4a.75.75%200%200%201%201.06-1.06L8%209.22l3.47-3.47a.75.75%200%200%201%201.06%201.06l-4%204a.75.75%200%200%201-.53.22Z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: right 12px top 50%;
        background-size: 16px;
        padding-right: 40px; /* Thêm padding để mũi tên không đè lên chữ */
    }

    /* 3.2. Style riêng cho Textarea */
    .form-contact .form-group textarea {
        resize: vertical; /* Cho phép thay đổi kích thước theo chiều dọc */
        min-height: 120px; /* Chiều cao tối thiểu */
    }

    /*
     * 4. HIỆU ỨNG NỔI (FLOAT)
     */

    /* Thủ thuật cho INPUT và TEXTAREA:
     * - Cần có placeholder=" " (một dấu cách) để :placeholder-shown hoạt động
     * - Khi input/textarea CHƯA được gõ gì (:placeholder-shown), label ở nguyên vị trí
     * - Khi input/textarea được focus HOẶC CÓ CHỮ (:not(:placeholder-shown)), label di chuyển lên
     */
    
    .form-contact .form-group input:focus + label,
    .form-contact .form-group input:not(:placeholder-shown) + label,
    .form-contact .form-group select:focus + label,
    .form-contact .form-group select:valid + label,
    .form-contact .form-group textarea:focus + label,
    .form-contact .form-group textarea:not(:placeholder-shown) + label {
        top: -10px; /* Di chuyển lên trên */
        left: 10px;
        font-size: 12px;
        color: #007bff; /* Đổi màu khi active */
        
        /* Thêm nền trắng để "cắt" qua đường viền (border) */
        background-color: white;
        padding: 0 4px; /* Tạo khoảng hở hai bên chữ */
        z-index: 2; /* Đặt label lên trên cùng */
    }

    /* 5. Style khi focus (viền xanh) */
    .form-contact .form-group input:focus,
    .form-contact .form-group select:focus,
    .form-contact .form-group textarea:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
    }
    .GPc-box .title-page span.text-shell{
        position: absolute;
        left: 40px;
        bottom: 40px;
        color: #fff;
        display: flex;
        font-size: 16px;
    }
    .GPc-box .title-page span.text-shell img{
        width: 24px;
        margin-right: 12px;
    }
    .list-contact{
        margin-top: 60px;
    }
    .list-contact li{
        display: flex;
        margin-bottom: 20px;
    }
    .list-contact li figure{
        width: 24px;
        height: 24px;
        margin-right: 12px;
    }
    .list-contact li figure img{}
    .list-contact li article{
        width: calc(100% - 36px);
    }
    .list-contact li article label{
        font-size: 16px;
        font-family: "BeVietnamPro-SemiBold";
        color: #fff;
        margin-bottom: 0;
    }
    .list-contact li article p{
        font-size: 16px;
        color: #fff;
        margin-bottom: 0;
    }

    @media (max-width: 541px){

        .GPc-box .title-page span.text-shell{
            position: initial;
            margin-top: 20px;
            display: block;
        }
        .form-contact{
            border-radius: 39px 39px 0 0;
        }
        .GPc-box .title-page {
            padding: 40px;
            text-align: center !important;
        }
        .list-contact li article{
            text-align: left;
        }
    }

/****** End Section Contact ******/

/****** Section Product ******/

/*------------------------------------*\
     Products Slider Section 
\*------------------------------------*/
.products .slick-slide {
  height: auto;
  margin: 0 10px;
}

.products {
  background: #D6DFFA;
  padding: 80px 0 130px;
}

.section-header {
  text-align: center;
  margin-bottom: 79px;
  padding: 0 20px;
  line-height: 46px;
}

.section-title {
  font-size: 52px;
  font-weight: 700 !important;
  color: #363739 !important;
  margin-bottom: 8px;
  text-align: center;
}

.text-red {
  color: #CF232A;
}

.section-description {
  font-size: 19px;
  color: rgba(54, 55, 57, 0.7);
  margin: 0;
}

.product-card {
  background: white;
  border-radius: 16px;
  padding: 16px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  border: 1px solid #E9E9E9;
  height: 985px;
}

.product-image {
  height: 325px;
  border-radius: 17px;
}

.product-img-placeholder {
  width: 100%;
  height: 325px;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-name {
  font-size: 22px;
  font-weight: 600 !important;
  color: #363739;
  text-align: center;
  margin: 0;
}

.product-price {
  text-align: center;
  font-weight: 600;
  color: CF232A;
}

.price-amount {
  font-size: 36px;

}

.product-info .btn-dark {
  border-radius: 12px;
  font-size: 16px;
}

.price-currency {
  font-size: 17px;
}

.divider {
  border: none;
  border-top: 1px solid #E9E9E9;
  margin: 0;
}

.product-description h4 {
  font-size: 16px;
  font-weight: 700 !important;
  color: #363739;
  margin: 0 0 16px;
  min-height: 40px;
}

.product-description p {
  font-size: 16px;
  color: rgba(54, 55, 57, 0.7);
  margin: 0 0 16px;
}

.product-description p:last-child,
.product-best-for p:last-child {
  margin-bottom: 0 !important;
}

.product-best-for,
.policy-text {
  font-size: 16px;
  color: rgba(54, 55, 57, 0.7);
}

.product-best-for p {
  margin: 0 0 8px;
}

.product-best-for strong {
  font-weight: 700 !important;
}

.my-slider.slick-prev {
  right: 66px;
  left: auto;
}

.my-slider .slick-prev,
.my-slider .slick-next,
.features .slick-prev,
.features .slick-next {
  bottom: -100px;
  width: 35px;
  height: 35px;
  top: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.my-slider .slick-prev:before,
.my-slider .slick-next:before,
.features .slick-prev:before,
.features .slick-next:before {
  background: url(../img/next.svg) no-repeat 0 0;
  width: 35px;
  height: 35px;
  content: "";
  display: block;
}


.features .slick-next {
  left: 55%;
  bottom: -103px;
}

.my-slider .slick-next {
  left: 53%;
  bottom: -103px;
}

.my-slider .slick-prev:before,
.features .slick-prev:before {
  transform: rotate(180deg);
}
@media (max-width: 590px) {
    .product-card {
        min-width: 100%;
        height: 920px;
    }
    .my-slider .slick-next{
        left: 63%;
    }
    .my-slider .slick-prev{
        left: 34%;
    }
}
/****** End Section Product ******/
 /*Section Experience */

.experience {
  padding: 90px 0;
  background: #111826;
  margin-bottom: 80px;
}

.experience h3,
.section-description {
  color: rgba(54, 55, 57, 0.7);
  text-align: center;
}

.title-ex {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fff;
}

.list-download {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 16px;
  justify-content: start;
}

.qrcode {
  background: #CF232A;
  width: 115px;
  text-align: center;
  border-radius: 14px;
  padding: 10px;
  font-size: 12px;
  color: #fff;
}

.qrcode img {
  border-radius: 10px;
  /*height: 100px;*/
  object-fit: cover;
}

.experience ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.experience .section-title,
.experience .section-description {
  color: #fff !important;
}

.experience .list li {

  gap: 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 24px;
  align-items: center;
  margin-bottom: 24px;
}

ul.list li .section-description {
  font-size: 16px;
  margin-bottom: 20px;
  display: block;
  text-align: left;
}

.qrlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qrlist img {
  height: 40px;
}